<template>
	<view>
		<view class="list">
			<view class="list-name">重量：</view>
			<view class="list-input">
				<input type="number" v-model="value" :focus="true" :maxlength="6">
			</view>
			<view class="list-unit">kg</view>
		</view>
		<view class="img-box">
			<view class="img-item" v-for="(item,index) in imgList">
				<view class="delete-box" @click="deleteImg(index)">
					<image src="@/static/theme/default/home/del.png" mode=""></image>
				</view>
				<image class="img" :src="item.img" mode="" @click="preview(index)"></image>
			</view>
		</view>
		<view class="photo-box" @click="photo">
			<view class="hover-class photo-hover-class" hover-class="clickable">
				<image class="photo" src="@/static/theme/default/home/photo.png" mode=""></image>
			</view>
		</view>
		<view class="finish-box" @click="finish">
			<view class="hover-class photo-hover-class" hover-class="clickable">
				<image class="photo" src="@/static/theme/default/home/finish.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import { pathToBase64 } from '@/plugins/image-tools/index.js'
	import {formatImg} from '@/common/custom_util.js'
	import _custom from '@/common/_custom.js'
	import {uploadImages} from '@/common/custom_util.js'
	import moment from 'moment';
	
	export default {
		data() {
			return {
				imgList: [],
				value: ''
			}
		},
		methods: {
			photo(v) {
				let that = this;
				if(that.imgList.length > 5) {
					uni.showToast({
						title: '最多6张图片，请删除已有图片',
						icon: 'none'
					})
					return
				}
				uploadImages({},res => {
					uni.hideLoading()
					that.imgList.push(...res);
				})
			},
			preview(i) {
				let temp = [];
				this.imgList.forEach(item => {
					temp.push(item.img)
				})
				uni.previewImage({
					current: i,
					urls: temp
				})
			},
			deleteImg(i) {
				this.imgList.splice(i,1)
			},
			finish() {
				let that = this;
				let temp = [];
				if(!this.value) {
					uni.showToast({
						title: '重量不能为空',
						icon: 'none'
					})
					return
				}
				if(this.value > 300000) {
					uni.showToast({
						title: '重量不能大于300000',
						icon: 'none'
					})
					return
				}
				if(this.imgList.length < 2) {
					uni.showToast({
						title: '至少上传两张照片',
						icon: 'none'
					})
					return
				}
				let timestamp = moment().valueOf();
				this.imgList.forEach((item,index) => {
					temp.push({
						imgindex: index,
						imgpath: item.path,
						imgtimestamp: timestamp
					})
				})
				_custom.getDataJava({
					apiname: 'addWuNiWeightImages',
					code: 13,
					apiparam: temp,
					complete() {
						_custom.getDataJava({
							apiname: 'addWuNiWeightData',
							code: 3,
							apiparam: {
								weightnum: that.value,
								imgtimestamp: timestamp
							},
							success() {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})
								setTimeout(() => {
									uni.navigateBack({})
								},500)
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.photo-box,.finish-box {
		position: fixed;
		bottom: 50rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		box-shadow: 0 0 20rpx 2rpx rgba(5, 138, 255, 0.3);
		background-color: #3C9CFF;
	}
	
	.photo-box {
		left: 20%;
	}
	
	.finish-box {
		right: 20%;
	}
	
	.photo-hover-class {
		height: 100%;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.photo {
		width: 50%;
		height: 50%;
	}
	
	.list {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.list-name {
		width: 100rpx;
		font-size: 30rpx;
		color: #aaa;
	}
	
	.list-input {
		width: calc(100% - 140rpx);
	}
	
	.list-unit {
		width: 40rpx;
		color: #aaa;
	}
	
	.img-box {
		padding: 10rpx;
	}
	
	.img-item {
		position: relative;
		width: 350rpx;
		height: 250rpx;
		margin-right: 15rpx;
		margin-top: 20rpx;
		float: left;
	}
	
	.delete-box {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 60rpx;
		height: 60rpx;
		z-index: 99999;
	}
	
	.delete-box > image {
		width: 100%;
		height: 100%;
	}
	
	.img {
		width: 100%;
		height: 100%;
	}
</style>
